下面一个简单jquery文字向上滚动插件：
HTML/css代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div,body,ul,li{ margin:0; padding:0;} #scroll{ height:24px; width:200px; border:1px solid #999; overflow:hidden; margin:120px auto 0 auto; position:relative;} #scroll ul{ position:relative;} #scroll ul li{ height:24px; line-height:24px; overflow:hidden;} #scroll ul li a{ color:#000; font-size:12px; margin-left:5px; text-decoration:none;} </style> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head> <body> <div id="scroll"> <ul> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> </ul> </div>Jquery
<script> (function(S){ S.fn.extend({ Scroll:function(speed){ var liH = $(this).find("li").height(); var _this = $(this).find("ul"); function Slide(){ _this.animate({marginTop : -liH},1000,function(){ _this.css({marginTop:0}).find("li:first").appendTo(_this); }) } //自动播放 function autoPlay(){ timeId = setInterval(Slide,speed); }; //停止播放 function autoStop(){ window.clearInterval(timeId); }; autoPlay(); _this.hover(autoStop,autoPlay).mouseout() } }) })(jQuery); $(function(){ $("#scroll").Scroll(2000); }) </script>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦